<template>
  <div>
    <span v-if="showSpan">{{ checkData.name }}</span>
    <div ref="dictDom" v-else @click="openPicker($event)" class="weui-cell_access">
      <div class="select-box weui-cell__ft vux-cell-primary" :style="disabled? 'padding: 0':'padding: 9px 0;'">
        <template :style="disabled? 'margin-right: 0;':'margin-right: 10px;'">
          <div class="left showValue" v-if="value1.length>0">
            <span>{{ checkData.name }}</span>
          </div>
          <div class="left left_placeholder" v-else>
            <span>{{ placeholder ? placeholder : '请选择' }}</span>
          </div>
        </template>
        <!--        <x-icon fill="#C8C8CD" v-if="showPopupPicker && !disabled" type="ios-arrow-down" size="20"></x-icon>-->
        <!--        <x-icon fill="#C8C8CD" v-if="!showPopupPicker && !disabled" type="ios-arrow-right" size="20"></x-icon>-->
      </div>
      <slot :value="checkData"></slot>
    </div>
    <div v-show="!list">
      <popup-picker :show.sync="showPopupPicker"
                    :show-cell="false"
                    :data="dataList"
                    confirm-text="确定"
                    v-model="value1"
                    @on-show="onShow"
                    @on-hide="onHide"
                    @on-change="onChange">
      </popup-picker>
    </div>
    <div v-show="list && list.length>0">
      <van-popup v-model="showPopupPicker" position="bottom" round>
        <van-nav-bar title="" left-text="取消" @click-left="showPopupPicker = false"></van-nav-bar>
        <div class="select-substance">
          <div class="substance-li" v-for="item in list" :key="item.id" @click="onChange([item.key])">
            <div class="left-icon">
              <div class="substance-icon" v-if="item.key != value1">
                <van-icon name=""/>
              </div>
              <van-icon v-else name="checked"/>
            </div>
            <div class="substance-item">
              <div>{{ item.name }}</div>
              <p>{{ item.content }}</p>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
    <!--    弹框-->
    <van-dialog v-model="showDialog" title="温馨提示" :show-cancel-button="false" :show-confirm-button="false">
      <p style="padding: 8px 24px 26px;color: #646566;">借款人已婚如未进行配偶信息录入及授权，则贷款可能会被拒绝或被降低额度。</p>
      <div class="van-hairline--top van-dialog__footer">
        <div class="van-button van-button--default van-button--large van-dialog__cancel" @click="clickBut('不授权','2')">
          <div class="van-button__content">不授权</div>
        </div>
        <div class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" @click="clickBut('配偶现场授权','1')">
          <div class="van-button__content">现场授权</div>
        </div>
        <div class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" @click="clickBut('配偶非现场授权','0')">
          <div class="van-button__content">非现场授权</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
/**
 * :list="[
 {key:'3',name:'个体工商户',content:'拥有有效个体工商营业执照的个人经营者。'},
 {key:'5',name:'小微企业主',content:'拥有有效工商注册企业营业执照的企业主。'},
 {key:'1',name:'农户',content:'无营业执照验证，需要通过村居准入确认其农户经营身份。'},
 {key:'9999',name:'自雇人群',content:'无营业执照验证，需要通过上传资料确认其经营身份。'}
 ]"   //不走接口  有介绍的content  下拉数据list
 */
import {
  PopupPicker,
  Datetime,
  Group
} from 'vux'
import bpmService from '@/service/bpm/bpmService'
import Vue from 'vue'
import {Dialog} from "vant";

export default {
  components: {
    PopupPicker,
    Datetime,
    Group
  },
  props: {
    showSpan: {
      type: Boolean,
      default: false
    },
    useType: {
      type: String,
      default: ''
    },
    // type: {
    //   type: String,
    //   default: ''
    // },
    // 如为多列选择器则放多个数组
    // datalist: {
    //   type: Array,
    //   default: () => [[]]
    // },
    disabled: {
      type: Boolean,
      default: false
    },
    dictKey: {
      type: String,
      default: ''
    },
    pickerData: {
      type: [Array, String],
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    // 有介绍的数据列表
    list: {
      type: Array,
      default: () => []
    },
  },
  model: {
    prop: 'pickerData',
    event: 'handleChange'
  },
  watch: {
    pickerData(val) {
      let value = typeof val == 'string' ? val ? [val] : [] : val
      this.value1 = value
      let dataList = this.dataList[0]
      let data = {}
      if (this.list && this.list.length > 0) {
        this.list.forEach((v, i) => {
          if (v.key == this.value1[0]) {
            data = v
          }
        })
      } else {
        dataList.forEach((v, i) => {
          if (v.key == this.value1[0]) {
            data = v
          }
        })
      }
      this.checkData = data
    }
  },
  data() {
    return {
      showDialog: false,//弹框展示
      value1: typeof this.pickerData == 'string' ? this.pickerData ? [this.pickerData] : [] : this.pickerData,
      checkData: {},
      date: '',
      showPopupPicker: false,
      dataList: [
        []
      ]
    }
  },
  mounted() {
    this.getDictInfo(this.dictKey)
    this.$nextTick(() => {
      let dictDoms = this.$refs.dictDom.firstElementChild
      if (this.disabled){
        dictDoms.classList.add("xxx");
      }
    })
  },
  methods: {
    clickBut(name, val) {
      this.checkData['name'] = name
      // let value = this.valueDispose(val)
      this.$emit('handleChange', val);
      this.showPopupPicker = false;
      this.showDialog = false
    },
    openPicker(vnode) {
      if (this.disabled || vnode.target.disabled) return
      this.showPopupPicker = true
    },
    getDictInfo(dictKey) {
      var defer = this.baseService.postForm(this.__ctx + "/sys/dataDict/getDictData", {dictKey: dictKey});
      let that = this
      Vue.tools.getResultData(defer, function (data) {
        if (data.length > 0) {
          let dataList = data
          dataList.forEach((v, i) => {
            let obj = v
            obj.value = v.key
            dataList[i] = obj

            if (that.value1.length > 0) {
              if (v.key == that.value1[0]) {
                that.checkData = v
              }
            }
          })
          that.dataList = [dataList]

          if (that.list && that.list.length > 0) {  //传了list值  带介绍的
            that.list.forEach((v, i) => {
              if (that.value1.length > 0) {
                if (v.key == that.value1[0]) {
                  that.checkData = v
                }
              }
            })
          }
        }
      }, "alert");
    },
    onChange(val) {
      if (this.useType == 'sqfs') {
        if (val[0] == 2) {
          this.showDialog = true
        }
        // else {
        let dataList = this.dataList[0]
        let value = val[0]
        let data = {}
        //
        if (this.list && this.list.length > 0) {
          this.list.forEach((v, i) => {
            if (v.key == value) {
              data = v
            }
          })
        } else {
          dataList.forEach((v, i) => {
            if (v.key == value) {
              data = v
            }
          })
        }
        this.checkData = data
        // let value = this.valueDispose(val)
        this.$emit('handleChange', data.key);
        this.showPopupPicker = false;
        // }
      } else {
        let dataList = this.dataList[0]
        let value = val[0]
        let data = {}

        if (this.list && this.list.length > 0) {
          this.list.forEach((v, i) => {
            if (v.key == value) {
              data = v
            }
          })
        } else {
          dataList.forEach((v, i) => {
            if (v.key == value) {
              data = v
            }
          })
        }
        this.checkData = data
        // let value = this.valueDispose(val)
        this.$emit('handleChange', data.key);
        this.showPopupPicker = false;
      }
    },
    onShow() {
      this.$emit('handleShow')
      //当选择下拉字数太多的时候，为了让字数全部显示，大于30字的时候选择使用缩放字体的方式来控制显示全部问题
      const itemDom = Array.from(document.getElementsByClassName('scroller-item'));
      itemDom&&itemDom.forEach((item)=>{
        const fontSize = 30/item.innerText.length.toFixed(2)
        item.style.fontSize= fontSize>1?'16px':fontSize+ 'em';
      })
    },
    onHide(type) {
      this.$emit('handleHide', type)
    },
    valueDispose(arr) {
      return arr.join(' ')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .vux-x-icon-ios-arrow-right {
  color: yellow;

}
.select-box {
  .showValue {
    color: #000000;
    font-size: 17px;
  }

  .left_placeholder {
    color: rgb(201, 205, 212);
    font-family: HarmonyOS Sans SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
  }

  .right-icon {
    color: rgb(201, 205, 212);
  }
}

.select-substance {
  min-height: 30vh;
  max-height: 60vh;
  border-top: 1px solid rgb(242, 242, 242);
  padding: 1.2rem 2rem;
  overflow: auto;

  .substance-li {
    padding: 0.8rem 0;
    display: flex;
    // align-items: center;
    border-bottom: 1px solid rgba(229, 230, 235, 0.5);

    &:last-child {
      border-bottom: 0;
    }

    .left-icon {
      width: 4.8rem;
    }

    .substance-icon {
      width: 2.8rem;
      height: 2.8rem;
      border: 1px solid var(--primary-color);
      color: var(--primary-color);
      border-radius: 50%;
      margin-right: 1.6rem;
      display: flex;
      align-items: center;
      justify-content: center;

      /deep/ .van-icon {
        font-size: 1.8rem;
      }
    }

    /deep/ .van-icon {
      &.van-icon-checked {
        font-size: 3rem;
        color: var(--primary-color);
        margin-right: 1.6rem;
      }
    }

    .substance-item {
      width: calc(~'100% - 4.4rem');

      div {
        font-size: 1.6rem;
        line-height: 2.2rem;
        font-weight: 500;
      }

      p {
        font-size: 1.4rem;
        line-height: 2.2rem;
        color: rgba(29, 33, 41, 0.54);
      }
    }
  }
}

//新的
.xxx {
  &::after {
    //content: '' !important;
    display: none !important;
  }
}
</style>
